<template>
	<div id="rankline">
	</div>
</template>
<script>
	export default {
		props: {
			activeTable: {
				type: Array,
				required: true
			}
		},
		computed: {
			tx: function () {
				let tx_temp = [null, null, null, null, null]
				for (let i = 0; i <this.activeTable.length; i++) {
					tx_temp[i] = Number(this.activeTable[i]['tx'])
				}
				return tx_temp
			},
			rx: function () {
				let rx_temp = [null, null, null, null, null]
				for (let i = 0; i <this.activeTable.length; i++) {
					rx_temp[i] = Number(this.activeTable[i]['rx'])
				}
				return rx_temp
			}
		},
		watch: {
			tx: function () {
				let chart = $("#rankline").highcharts()
				chart.series[0].setData(this.tx)
				let dataLabelNode = $(".highcharts-data-labels").find("g");//获取数据节点
					for(let i = 0; i<dataLabelNode.length; i++) {
							dataLabelNode[i].style.visibility = "visible";
							dataLabelNode[i].style.opacity = 1;
					}
			},
			rx: function () {
				let chart = $("#rankline").highcharts()
				chart.series[1].setData(this.rx)
				let dataLabelNode = $(".highcharts-data-labels").find("g");//获取数据节点
					for(let i = 0; i<dataLabelNode.length; i++) {
							dataLabelNode[i].style.visibility = "visible";
							dataLabelNode[i].style.opacity = 1;
					}
			},

		},
		data () {
			return {
				color: []
			}
		},
		methods: {
			loadPie() {
				Highcharts.setOptions({
					colors: this.color,
					credits: {
						enabled: false // 禁用版权信息
					},
					exporting: {
						enabled: false
					},
					legend: {
						enabled: false
					}
				})
				Highcharts.chart('rankline', {
					chart: {
						type: 'bar'
					},
					title: {
						text: null
					},
					tooltip: {
						enabled: true,
						formatter: function () {
							return '<b>名次：' + this.x + '</b><br/>' + index(this.point.colorIndex) + covertFlow(this.y, 2);

							function index(index) {
								if (index == 1) {
									return "<b>下行:</b>"
								} else {
									return "<b>上行:</b>"
								}
							}

							function covertFlow(bps, index) {
								let flow = ''
								if (bps < 1024) {
									flow = Math.ceil(bps) + 'Bps'
								}
								if (bps >= 1024 && bps < 1024 * 1024) {
									flow = bps / 1024
									flow = flow.toFixed(index) + 'KBps'
								}
								if (bps >= 1024 * 1024 && bps < 1024 * 1024 * 1024) {
									flow = bps / 1024 / 1024
									flow = flow.toFixed(index) + 'MBps'
								}
								if (bps >= 1024 * 1024 * 1024) {
									flow = bps / 1024 / 1024 / 1024
									flow = flow.toFixed(index) + 'GBps'
								}
								return flow
							}
						}
					},
					xAxis: {
						categories: [1, 2, 3, 4, 5],
						tickPixelInterval: 1,
						lineWidth: 1,
						gridLineWidth: 1
					},
					yAxis: {
						title: {
							text: null
						},
						min:0,
						minRange: 1,
						lineWidth: 1,
						pointPadding:0.01,
						tickAmount:4,
						// tickPixelInterval: 200,
						labels: {
							formatter: function () {
								function covertFlow(bps) {
									let flow = ''
									if (bps < 1024) {
										flow = Math.ceil(bps) + 'Bps'
									}
									if (bps >= 1024 && bps < 1024 * 1024) {
										flow = bps / 1024
										flow = flow.toFixed(0) + 'KBps'
									}
									if (bps >= 1024 * 1024 && bps < 1024 * 1024 * 1024) {
										flow = bps / 1024 / 1024
										flow = flow.toFixed(0) + 'MBps'
									}
									if (bps >= 1024 * 1024 * 1024) {
										flow = bps / 1024 / 1024 / 1024
										flow = flow.toFixed(0) + 'GBps'
									}
									return flow
								}
								return covertFlow(this.value);
							}
						}
					},
					plotOptions: {
						column: {
							pointPadding:1,
							pointMargin: 0,
							borderWidth: 0
						},
						series: {
							groupPadding:0.2,
							dataLabels: {
								enabled: true,
								style: {
									color: '#666666',
									fontWeight: '500'
								},
								formatter:function() {
									function covertFlow(bps) {
										let flow = ''
										if (bps < 1024) {
											flow = Math.ceil(bps) + 'Bps'
										}
										if (bps >= 1024 && bps < 1024 * 1024) {
											flow = bps / 1024
											flow = flow.toFixed(2) + 'KBps'
										}
										if (bps >= 1024 * 1024 && bps < 1024 * 1024 * 1024) {
											flow = bps / 1024 / 1024
											flow = flow.toFixed(2) + 'MBps'
										}
										if (bps >= 1024 * 1024 * 1024) {
											flow = bps / 1024 / 1024 / 1024
											flow = flow.toFixed(2) + 'GBps'
										}
										return flow
									}
									return covertFlow(this.y)
									
								}	
							}
						}
					},
					lang: {
						noData: "暂无数据"
					},
					noData: {
							style: {
								fontSize: '15px',
								color: '#69b6ff'
							}
					},
					series: [{
						name: '上行',
						data: this.tx
					}, {
						name: '下行',
						data: this.rx
					}]
				})
			}
		},
		mounted() {
			if (this.themeColor ==='blue') {
				this.color = ['#69b6ff', '#f5a623']
			} else if (this.themeColor==='red') {
				this.color= ['#d8252f', '#f39800']
			}
			this.loadPie()
		}
	}
</script>
<style scoped>
	#rankline {
		width: 280px;
		height: 280px;
	}
	g{
		visibility: visible;
		opacity: 1
	}
	tspan{
		visibility: visible;
		opacity: 1
	}
</style>